<template>
  <div>

    <van-nav-bar
        title="添加零件"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-steps :active="active">
      <van-step>选择类型</van-step>
      <van-step>配置信息</van-step>
      <van-step>添加完成</van-step>
    </van-steps>


    <div v-if="active==0">
      <van-grid square>

        <van-grid-item v-for="item in partsType" :key="item.id" :name="item.id" :text="item.name" @click="active = 1,type=item.id" />

      </van-grid>
    </div>

    <div v-if="active==1">

    <van-divider>基本信息</van-divider>

      <van-field v-model="name" label="名称" placeholder="商品名称" autosize type="textarea" />
      <van-field v-model="img" label="图片" placeholder="图片地址URL" autosize type="textarea" />
      <van-field v-model="url" label="链接" placeholder="购买链接或者附件链接" autosize type="textarea" />
      <van-field v-model="price" type="number" label="价格" />


    <van-divider>操作</van-divider>

    <!-- 居中 -->
    <van-row type="flex" justify="center">
      <van-col span="24" align="center"><van-button type="primary" @click="add_part">添加零件</van-button></van-col>
    </van-row>
    </div>




    <div v-if="active==2">
      <div class="PostSuccess" style="text-align: center;">
        <p><van-icon name="checked" color="#07c160" size="50" /></p>
        <p>创建成功</p>
        <home />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addpart',
  props: {

  },
  data () {
    return {
      active:0,

      partsType: [],

      type: 0,
      name:'',
      img: '',
      url: '',
      price: 0,
    }
  },
  mounted() {
//加载默认数据
    this.$axios
        .get('https://www.17fpv.com/wp-json/jiangqie/v1/part/alltype')
        .then(response => {
          this.partsType = response.data.data.parts_type

        })
        .catch(function(error)
        { // 请求失败处理
          console.log(error);
        });
  },
  methods: {
    add_part(){
      if( !this.type || !this.name || !this.img){
        this.$toast.fail("内容缺失");
        return
      }

      var post_toast = this.$toast.loading(
          {
            message: '🚀正在发布...',
            forbidClick: true,
            duration: 0
          });


      var formData = new FormData()

      formData.append('type',this.type)
      formData.append('name', this.name)
      formData.append('img', this.img)
      formData.append('url', this.url)
      formData.append('price', this.price)

      let that = this
      this.$axios
          .post('https://www.17fpv.com/wp-json/jiangqie/v1/part/addpart', formData)
          .then(response =>{
            if (response.data.code == 1)
            {
              post_toast.clear()
              that.$toast.fail(response.data.msg)
            }
            else
            {

              post_toast.clear()
             that.active = 2

            }

          })
          .catch(function(error)
          {
            console.log(error)
          });
    },
    onClickLeft () {
      history.go(-1)
    },

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
